<!--商家销量统计的横向柱状图-->
<template>
  <div class="com-container">
    <div class="com-chart" id="seller">Hello world!</div>
  </div>
</template>

<script>
import { onMounted,onBeforeUnmount, inject, watch, reactive} from "vue";
import { getSellerData } from "@/service/getChartsData";
import { useStore } from 'vuex'

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Seller",
  setup(){
    // 1. 接收Echarts
    let echarts = inject('echarts')
    let chartInstance = reactive({})
    // 2. 定义接收数据变量
    let chartDate = reactive([])
    let xData = reactive([])
    let yData = reactive([])
    // 2.1显示当前页数
    let currentPage = 1
    // 2.2定义总页数
    let totalPage = 0
    // 2.3 定义接收定时器对象
    let timer = reactive({})
    const store = useStore()

    // 3. 初始化图表
    function initChart() {
      chartInstance = echarts.init(document.querySelector("#seller"), store.state.theme)

      let initOption = {
        // 图表标题
        title:{
          text:'▎商家销售统计',
          left:20,
          top:20
        },
        // 设置图表的定位
        grid:{
          top: '20%',
          left: '3%',
          right: '6%',
          bottom: '3%',
          containLabel: true // 定位是否包含坐标轴数据
        },
        xAxis:{
          type:'value'
        },
        yAxis:{
          type:'category',
        },
        // 触发提示
        tooltip:{
          trigger:'axis', //  trigger是触发条件，'axis'代表鼠标移入柱上触发提示
          // 设置提示样式
          axisPointer: {
            type:'line',  // 设置提示类型为线类型
            //z: 0,  // 层级
            lineStyle:{
              color: '#2D3443'
            }
          }
        },
        series: [
          {
            type:'bar',
            // 柱标签设置
            label:{
              show: true, // 是否在柱上显示数据
              position: 'right', // 显示在柱上的定位
              textStyle: {
                color: '#FFFFFF' // 显示数据颜色
              }
            },
            // 柱的样式
            itemStyle: {
              /*
              * new echarts.graphic.LinearGradient(x1, y1, x2, y2) //该API可以给柱设置渐变的颜色，在Y轴朝下的直角坐标系中方向为(x1, y1) 指向-> (x2, y2)
              * */
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                // 指明不同百分比之下的颜色值
                {
                  offset: 0,   // 百分之0下的颜色值
                  color: '#5052EE'
                },
                {
                  offset: 1,  // 百分之百下的颜色值
                  color: '#AB6EE5'
                },
              ])
            }
          }
        ]
      }
      chartInstance.setOption(initOption)
    }

    // 4. 获取数据
    async function getData(){
      let {data :res} = await getSellerData()
      chartDate = res
    }

    // 5. 处理获取数据
    function setChartData() {
      // 5.1 对数据从小到大进行排序
      chartDate.sort((a, b) => a.value - b.value)
      // 5.2 定义截取数据的开始下标和结束下标号，和每5条数据一页的总页数(余出加一页)
      let start = (currentPage -1) * 5
      let end = currentPage * 5
      totalPage = Math.ceil(chartDate.length / 5)
      // 5.3 截取5条数据
      const showData = chartDate.slice(start,end)
      // 5.4 取出商家姓名
      xData = showData.map(item => item.name)
      // 5.5 取出商家的值
      yData = showData.map(item => item.value)
    }

    // 6. 更新图表
    function updateChart() {
      setChartData()
      let dataOption = {
        yAxis:{
          data:xData
        },
        series: [
          {
            data:yData
          }
        ]
      }
      chartInstance.setOption(dataOption)
    }

    // 7. 定义定时器
    function startInterval() {
      timer = setInterval(() => {
        currentPage++
        if( currentPage > totalPage){
          currentPage = 1
        }
        updateChart()
      },3000)
    }

    // 8.为图表添加移入、移出事件
    function eventListeners(){
      chartInstance.on('mouseover',() => {
        clearInterval(timer)
      })
      chartInstance.on('mouseout',() => {
        startInterval()
      })
    }

    // 9. 为图表添加适配
    function screenAdapter() {
      // 9.1 为图表标题配置自适应
      const titleFontSize = document.querySelector("#seller").offsetWidth / 100 * 3.6
      const adapterOption = {
        // 图表标题
        title:{
          textStyle:{
            fontSize:titleFontSize
          },
        },
        tooltip:{
          axisPointer: {
            z: 0,  // 层级
            lineStyle:{
              width: titleFontSize,
            }
          }
        },
        series: [
          {
            barWidth:titleFontSize,
            itemStyle: {
              barBorderRadius:[0, titleFontSize / 2, titleFontSize / 2, 0], //设置柱的圆角（顺序： 左上，右上，右下，左下）
            }
          }
        ]
      }
      chartInstance.setOption(adapterOption)
      // 9.2 调用图表自带的自适应方法
      chartInstance.resize()
    }

    watch(() => store.state.theme, () => {
      //console.log('主题切换了')
      chartInstance.dispose()//销毁当前的图表
      initChart()//重新初始化图表对象
      updateChart()//更新图表的展示
      screenAdapter()//完成屏幕的适配
    })

    onMounted(() => {
      initChart()
      getData().then(() => {
        updateChart()
        startInterval()
        eventListeners()
        screenAdapter()
      })
      window.addEventListener('resize', screenAdapter)
    })

    onBeforeUnmount(() => {
       clearInterval(timer)
       window.removeEventListener('resize', screenAdapter)
    })

    return{ screenAdapter }
  }
}
</script>

<style scoped>

</style>